<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>淘宝搜索</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <link rel="stylesheet" href="css/reg.css">
    <link rel="stylesheet" href="css/header.css">
    <style>
        .img_card:hover {
            border: 1px solid red;
        }

        .top {
            width: 1070px;
            height: 44px;
            margin: 0 auto;
        }


        .top div input {
            display: block;
            height: 29px;
            width: 660px;
            float: left;
            margin: 4.5px 0 0 0;
            border: 2px solid orangered;
        }

        .top a {
            width: 80px;
            height: 35px;
            float: left;
            border: 0;
            margin: 4.5px 0 0 0;
            background-color: orangered;
            display: block;
            text-decoration: none;
            text-align: center;
            line-height: 35px;
            font-size: 17px;
            color: white;
        }


        .first {
            background-color: orangered;
            color: white;
        }

        .bottom a {
            float: left;
            width: 35px;
            height: 35px;
            display: block;
            color: #404040;
            font-size: 14px;
            border: 1px solid lightgray;
            text-align: center;
            line-height: 35px;
            text-decoration: none;

        }

        .bottom input {
            width: 37px;
            height: 23px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="height: 35px; margin-bottom: 30px"  >
            <div class="header_top">
                <div class="header_left">
                    <a href="" style="color: #FF4400;">亲，请登录</a>
                    <a href="">免费注册</a>
                    <a href="">手机逛淘宝</a>
                    <a href="">网页无障碍</a>
                </div>
                <div class="header_right">
                    <a href="">淘宝首页</a>
                    <a href="">
                        <el-dropdown>
                                <span class="el-dropdown-link">我的淘宝<i
                                        class="el-icon-arrow-down el-icon--right"></i></span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>已买到宝贝</el-dropdown-item>
                                <el-dropdown-item>我的足迹</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </a>
                    <a href=""><i class="el-icon-shopping-cart-2" style="color: #FF4400;"></i>购物车</a>
                    <a href="">
                        <el-dropdown>
                            <span class="el-dropdown-link"><i class="el-icon-star-on" style="color: #9c9c9c;"></i>收藏夹<i
                                    class="el-icon-arrow-down el-icon--right"></i></span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>收藏的宝贝</el-dropdown-item>
                                <el-dropdown-item>收藏的店铺</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </a>
                    <a href="">商品分类</a>
                    <a href="">免费开店</a>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">
                        <el-dropdown>
                            <span class="el-dropdown-link">千牛卖家中心<i
                                    class="el-icon-arrow-down el-icon--right"></i></span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>开店入驻</el-dropdown-item>
                                <el-dropdown-item>已卖出的宝贝</el-dropdown-item>
                                <el-dropdown-item>出售中的宝贝</el-dropdown-item>
                                <el-dropdown-item>卖家服务市场</el-dropdown-item>
                                <el-dropdown-item>卖家培训中心</el-dropdown-item>
                                <el-dropdown-item>体检中心</el-dropdown-item>
                                <el-dropdown-item>电商学习中心</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </a>
                    <a href="">
                        <el-dropdown>
                                <span class="el-dropdown-link">联系客服<i
                                        class="el-icon-arrow-down el-icon--right"></i></span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>消费者客服</el-dropdown-item>
                                <el-dropdown-item>卖家客服</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </a>
                </div>
            </div>
        </el-header>
        <el-main>
            <!--搜索框-->
            <div class="top" style="width: 1070px;
                             height: 44px;
                             margin-bottom: 30px">
                <img style="display: block;
                            width: 105px;
                            height: 43px;
                            float: left;"
                            src="./imgs/logo-so-420-172.png" alt="">
                <div class="search"
                     style="width: 978px;
                     height: 40px;
                     margin-left: 110px;">
                    <a href="" style="margin-left: 100px">宝贝</a>
                    <input style="font-size: 14px;
                                  padding-left: 5px;"
                           type="text" value="手机">
                    <a href="">搜 索</a>
                </div>
            </div>
            <!--筛选列-->
            <div></div>
            <!--商品列-->
            <div>
                <el-main>
                    <div>
                        <el-row>
                            <el-col :span="3"></el-col>
                            <el-col :span="16">
                                <div></div>
                                <div></div>
                            </el-col>
                            <el-col :span="5"></el-col>
                        </el-row>
                    </div>
                    <div style="width: 1010px ;margin: 0 auto">
                        <div style="width: 250px;height: 320px;margin: 0 auto;display:inline-block"
                             v-for="i in 44">
                            <el-card :body-style="{padding: '7px 7px 0 7px'} " shadow="hover" class="img_card">
                                <!--商品图片-->
                                <el-image
                                        style="height: 200px ; width: 180px; border-radius: 12px"
                                        :src="phone_infos[i].mainPic"
                                        fit="cover "></el-image>
                                <!--商品价格与付款人数-->
                                <div>
                                    <div style="color: #F40">¥{{phone_infos[i].actualPrice}}
                                        <span style="font-size: 12px;float: right ;color: #888">
                                            {{phone_infos[i].monthSales}}人付款
                                        </span>
                                    </div>
                                </div>
                                <!--商品标题-->
                                <div class="title"
                                     style="margin-top: 9px;height: 44px;width: 200px ;font-size: 16px;overflow:hidden;">
                                    {{phone_infos[i].title}}
                                </div>
                                <!--商品店铺名字-->
                                <div>
                                    <span style="margin-top: 9px;height: 44px;width: 200px ;font-size: 12px;overflow:hidden; color: #888">
                                        <i class="el-icon-s-unfold"></i> {{phone_infos[i].shopName}}
                                    </span>
                                </div>
                                <!--天猫超市与阿里巴巴-->
                                <div style="padding: 0 10px 15px 6px ;margin: 10px 0">
                                    <img src="imgs/tianmao.png" style="width: 16px;height: 16px;float: left">
                                    <img src="imgs/aliwangwang.png" style="width: 16px;height: 16px;float: right">
                                </div>

                            </el-card>
                        </div>
                    </div>
                </el-main>
            </div>
            <!--底部选择分页-->
            <div class="bottom" style="margin-top: 30px">
                <div style=" width:550px;height:57px;margin: 0 auto">
                    <a href="" style="width: 70px;">上一页</a>
                    <a href="" class="first">1</a>
                    <a href="">2</a>
                    <a href="">3</a>
                    <a style="border:0;">...</a>
                    <a href="">100</a>
                    <a href="" style="width: 70px;">上一页</a>
                    <a style="width: 65px;border: 0;"> 共100页,</a>
                    <a style="width: 100px;border: 0;"> 到第
                        <input type="text" value="2"> 页
                    </a>
                    <a style="width: 45px;height: 23px;margin-top: 6px;line-height: 23px;" href="">确定</a>
                </div>
            </div>

            <div class="top" style="margin-bottom: 30px">
                <div class="search" style="width: 753px;height: 40px;margin: 0 auto">
                    <input type="text" value="手机">
                    <a href="">搜 索</a>
                </div>
            </div>
        </el-main>
        <el-footer>
            <div class="footer-hd">
                <p>
                    <a href="//page.1688.com/shtml/about/ali_group1.shtml">阿里巴巴集团</a>
                    <b>|</b>
                    <a href="//www.alibaba.com">阿里巴巴国际站</a>
                    <b>|</b>
                    <a href="//www.1688.com">阿里巴巴中国站</a>
                    <b>|</b>
                    <a href="//www.aliexpress.com">全球速卖通</a>
                    <b>|</b>
                    <a href="//www.taobao.com">淘宝网</a>
                    <b>|</b>
                    <a href="//www.tmall.com">天猫</a>
                    <b>|</b>
                    <a href="//ju.taobao.com">聚划算</a>
                    <b>|</b>
                    <a href="//www.etao.com">一淘</a>
                    <b>|</b>
                    <a href="//www.alimama.com">阿里妈妈</a>
                    <b>|</b>
                    <a href="//www.aliyun.com">阿里云计算</a>
                    <b>|</b>
                    <a href="//www.yunos.com">云OS</a>
                    <b>|</b>
                    <a href="//wanwang.aliyun.com">万网</a>
                    <b>|</b>
                    <a href="//www.alipay.com">支付宝</a>
                </p>
            </div>
            <div class="footer-bd">
                <p>
                    <a href="//huodong.taobao.com/wow/tbhome/act/about-home">关于淘宝</a>
                    <a href="//www.taobao.com/about/partners.php">合作伙伴</a>
                    <a href="//pro.taobao.com">营销中心</a>
                    <a href="//service.taobao.com/support/main/service_route.htm">联系客服</a>
                    <a href="//open.taobao.com">开放平台</a>
                    <a href="//www.taobao.com/about/join.php">诚征英才</a>
                    <a href="//consumerservice.taobao.com/contact-us">联系我们</a>
                    <a href="//www.taobao.com/sitemap.php">网站地图</a>
                    <a href="//terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201703241622_61002.html">法律声明及隐私权政策</a>
                    <em>&copy; 2022 Taobao.com 版权所有</em>
                </p>
                <p>
                    <span>网络文化经营许可证：<a
                            href="//img.alicdn.com/tps/i4/T1ysdvXtNeXXcPpEkQ-972-636.jpg">文网文[2010]040号</a></span>
                    <b>|</b>
                    <span>增值电信业务经营许可证：浙B2-20080224-1</span>
                    <b>|</b>
                    <span>信息网络传播视听节目许可证：1109364号</span>
                </p>
            </div>
        </el-footer>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>

<script src="js/data.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                phone_infos: phone_info_data,

                options: [{
                    value: '中国大陆+86'
                }, {
                    value: '中国香港+852'
                }, {
                    value: '中国澳门+853'
                }, {
                    value: '中国台湾+886'
                }, {
                    value: '韩国+82'
                }, {
                    value: '日本+81'
                }, {
                    value: '美国+1'
                }, {
                    value: '加拿大+1'
                }],
                value: '中国大陆+86'
            }
        }
    })
</script>
</html>